<template>
  <div class="view-wrapper" >
    <div class="head" v-loading="loading">
      <template>
        <el-form :model="formInline" :rules="rules" ref="formInline" :label-width="labelWidth">
          <el-form-item label="区域：" class="el-label" prop="areaId">
            <el-select v-model="formInline.areaId" placeholder="请选择设置区域" @change="change">
              <el-option v-for="item in optionsArea" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计划发卡超出发卡规模预警设置：" class="el-label" prop="planOpenType">
            <el-switch v-model="formInline.planOpenType" active-value="1" active-text="开启" inactive-value="0"
              inactive-text="关闭">
            </el-switch>
          </el-form-item>
          <el-form-item label="单日售卡超过计划发卡预警设置：" class="el-label" prop="ratioOpenType">
            <el-switch v-model="formInline.ratioOpenType" active-value="1" active-text="开启" inactive-value="0"
              inactive-text="关闭">
            </el-switch>
          </el-form-item>
          <el-form-item label="" class="el-label" prop="" v-if="formInline.ratioOpenType == 1">
            <div class="block">
              <el-slider v-model="formInline.changeRatio" class="slider_style"></el-slider>
              <span class="hui rig_20">{{formInline.changeRatio}}%</span>
              <span class="hui" style="font-size:14px">比如，设置比例60%，计划发卡1000张卡，商家单日售卡605张，则进行预警</span>
            </div>
          </el-form-item>
          <el-form-item label="赠送金额超过购卡金额预警设置：" class="el-label" prop="saleCardOpenType">
            <el-switch v-model="formInline.saleCardOpenType" active-value="1" active-text="开启" inactive-value="0"
              inactive-text="关闭">
            </el-switch>
          </el-form-item>
          <el-form-item label="" class="el-label" prop="" v-if="formInline.saleCardOpenType == 1">
            <div class="block">
              <el-slider v-model="formInline.saleCardValue" class="slider_style"></el-slider>
              <span class="hui rig_20">{{formInline.saleCardValue}}%</span>
              <span class="hui" style="font-size:14px">比如，设置比例60%，购卡金额1000元，赠送超过600元，则进行预警</span>
            </div>
          </el-form-item>
          <el-form-item label="单日售卡金额超过额定值预警设置：" class="el-label" prop="valueOpenType">
            <el-switch v-model="formInline.valueOpenType" active-value="1" active-text="开启" inactive-value="0"
              inactive-text="关闭">
            </el-switch>
          </el-form-item>
          <el-form-item label="预警金额" class="el-label" label-width="330px" prop="changeValue" v-if="formInline.valueOpenType == 1" required>
            <el-input style="width: 400px;" placeholder="请输入" v-model="formInline.changeValue">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="预付资金长期未消费预警：" class="el-label" prop="">
            <el-switch v-model="formInline.prepaidFundsOpenType" active-value="1" active-text="开启" inactive-value="0"
              inactive-text="关闭">
            </el-switch>
          </el-form-item>
          <el-form-item label="" class="el-label" prop="" label-width="80px" v-if="formInline.prepaidFundsOpenType==1">
            <el-form-item label="未消费时长" class="el-label" prop="prepaidFundsValue" required>
              <el-input style="width: 400px;" placeholder="请输入" v-model="formInline.prepaidFundsValue">
                <template slot="append">月</template>
              </el-input>
            </el-form-item>
          </el-form-item>
          <el-form-item label="消费者投诉频次预警：" class="el-label" prop="">
            <el-switch v-model="formInline.complaintOpenType" active-value="1" active-text="开启" inactive-value="0"
              inactive-text="关闭">
            </el-switch>
          </el-form-item>
          <el-form-item label="" class="el-label" prop="" label-width="80px" v-if="formInline.complaintOpenType==1">
            <el-form-item label="每月次数" class="el-label" prop="complaintValue" required>
              <el-input style="width: 400px;" placeholder="请输入" v-model="formInline.complaintValue">
                <template slot="append">次</template>
              </el-input>
            </el-form-item>
          </el-form-item>
        </el-form>
      </template>
      <div class="bot_box">
        <el-button type="primary" @click="submitForm('formInline')" :loading="buttonLoading">确认</el-button>
      </div>
    </div>
  </div>
</template>
<!-- <template>
  <div class="view-wrapper">
    <div class="head" v-loading="loading">
      <div class="list">
        <div class="lable"><span class="import_txt">*</span>区域：</div>
        <div class="content">
          <el-select v-model="formInline.areaId" placeholder="请选择设置区域" @change="change">
            <el-option v-for="item in optionsArea" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="list">
        <div class="lable">计划发卡超出发卡规模预警设置：</div>
        <div class="content">
          <el-switch v-model="formInline.planOpenType" active-value="1" active-text="开启" inactive-value="0"
            inactive-text="关闭">
          </el-switch>
        </div>
      </div>
      <div class="list listRadio">
        <div class="lable">单日售卡超过计划发卡预警设置：</div>
        <div class="content">
          <el-switch v-model="formInline.ratioOpenType" active-value="1" active-text="开启" inactive-value="0"
            inactive-text="关闭">
          </el-switch>
          <div class="block" v-if="formInline.ratioOpenType == 1">
            <el-slider v-model="formInline.changeRatio"></el-slider>
            <span class="hui rig_20">{{formInline.changeRatio}}%</span>
            <span class="hui" style="font-size:14px">比如，设置比例60%，计划发卡1000张卡，商家单日售卡605张，则进行预警</span>
          </div>

        </div>
      </div>
      <div class="list listRadio">
        <div class="lable">赠送金额超过购卡金额预警设置：</div>
        <div class="content">
          <el-switch v-model="formInline.saleCardOpenType" active-value="1" active-text="开启" inactive-value="0"
            inactive-text="关闭">
          </el-switch>
          <div class="block" v-if="formInline.saleCardOpenType == 1">
            <el-slider v-model="formInline.saleCardValue"></el-slider>
            <span class="hui rig_20">{{formInline.saleCardValue}}%</span>
            <span class="hui" style="font-size:14px">比如，设置比例60%，购卡金额1000元，赠送超过600元，则进行预警</span>
          </div>
        </div>
      </div>
      <div class="list listRadio">
        <div class="lable">单日售卡金额超过额定值预警设置：</div>
        <div class="content">
          <el-switch v-model="formInline.valueOpenType" active-value="1" active-text="开启" inactive-value="0"
            inactive-text="关闭">
          </el-switch>
          <div>
            <el-input style="width: 400px;margin-top: 20px" placeholder="请输入预警金额" v-model="formInline.changeValue"
              v-if="formInline.valueOpenType == 1">
              <template slot="append">元</template>
            </el-input>
          </div>
        </div>
      </div>
      <div class="bot_box">
        <el-button type="primary" @click="handleSubmit" :loading="buttonLoading">确认</el-button>
      </div>
    </div>
  </div>
</template> -->
<script>
  // components
  import {
    areaList
  } from "@/api/common";
  import {
    getGovConfig,
    setGovConfig
  } from "@/api/warningComplaint";
  export default {
    name: "warningSettings",
    components: {

    },
    data() {
      var validateFrequency = (rule, value, callback) => { //
        let regNumber = /(^[1-9]\d*$)/; //大于0的正整数
        if (regNumber.test(value) == false) {
          return callback(new Error('请输入大于0的整数'));
        } else {
          return callback()
        }
      };
      return {
        labelWidth: '250px',
        loading: true,
        buttonLoading: false,
        formInline: {
          planOpenType: 0, //计划发卡超出发卡规模预警设置   0关闭 1开启
          ratioOpenType: 0, //单日售卡超过计划发卡预警设置   0关闭 1开启
          changeRatio: 0, //设置比例
          saleCardOpenType: 0, //发行售卡超过购卡金额预警设置  0关闭 1开启
          saleCardValue: 0, //发行售卡超过购卡金额预警比例
          valueOpenType: 0, //单日售卡金额超过额定值预警设置  0关闭 1开启
          changeValue: '', //额定值
          areaId: '', //区域
          prepaidFundsOpenType: 0,//预付资金长期未消费预警 0关闭 1开启
          prepaidFundsValue: '',//预警频次
          complaintOpenType: 0,//消费者投诉频次预警 0关闭 1开启
          complaintValue:'',//每月次数
        },
        rules: {
          areaId: [
            { required: true, message: '请选择区域', trigger: ['change','blur'] },
          ],
          changeValue: [
            { required: true, message: '请输入预警金额', trigger: ['change','blur'] },
          ],
          prepaidFundsValue: [
            { required: true, validator: validateFrequency, trigger: ['change','blur'] },
          ],
          complaintValue: [
            { required: true, validator: validateFrequency, trigger: ['change','blur'] },
          ],
        },
        optionsArea: [],
        options: [{
          value: '1',
          label: '高新区'
        }, {
          value: '2',
          label: '海口市'
        }, {
          value: '3',
          label: '三亚市'
        }],
        value: ''
      };
    },
    computed: {
      
    },
    mounted() {

    },
    created() {
      this.getAreaList()
      // this.getDetail()
    },
    methods: {
      getAreaList() { //查询区域下拉框
        areaList().then(res => {
          this.optionsArea = res.result
          this.formInline.areaId = res.result[0].id
          console.log(this.formInline.areaId)
          setTimeout(()=>{
            this.getDetail(this.formInline.areaId)
          },500)
        }).catch(() => {

        })
      },
      change(e){
        console.log(e)
        this.getDetail(e)
      },
      getDetail(id) {
        this.loading = true
        let params = {
          areaId: id
        }
        getGovConfig(params).then(res => {
          const {
            result
          } = res
          this.formInline.planOpenType = result.planOpenType
          this.formInline.ratioOpenType = result.ratioOpenType
          this.formInline.changeRatio = result.changeRatio
          this.formInline.saleCardOpenType = result.saleCardOpenType
          this.formInline.saleCardValue = result.saleCardValue
          this.formInline.valueOpenType = result.valueOpenType
          this.formInline.changeValue = result.changeValue
          this.formInline.areaId = result.areaId
          this.formInline.prepaidFundsOpenType = result.prepaidFundsOpenType
          this.formInline.prepaidFundsValue = result.prepaidFundsValue
          this.formInline.complaintOpenType = result.complaintOpenType
          this.formInline.complaintValue = result.complaintValue
          setTimeout(()=>{
            this.loading = false
          },500)
        }).catch(() => {
          this.loading = false
        })
      },
      //确认
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // if (this.isAdmin && this.formInline.areaId == '') {
            //   this.$message.error("请选择区域");
            //   return
            // }
            if (this.formInline.ratioOpenType == 0) {
              this.formInline.changeRatio = 0
            }
            if (this.formInline.saleCardOpenType == 0) {
              this.formInline.saleCardValue = 0
            }
            if (this.formInline.valueOpenType == 0) {
              this.formInline.changeValue = 0
            }
            if (this.formInline.prepaidFundsOpenType == 0) {
              this.formInline.prepaidFundsValue = 0
            }
            if (this.formInline.complaintOpenType == 0) {
              this.formInline.complaintValue = 0
            }
            this.buttonLoading = true
            var data = {
              ...this.formInline
            }
            setGovConfig(data).then(res => {
              if (res.code == 200) {
                this.$message.success('操作成功');
                setTimeout(() => {
                  this.getDetail(this.formInline.areaId)
                  this.buttonLoading = false
                }, 800)
              }
            }).catch(() => {
              this.buttonLoading = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //确认
      handleSubmit() {
        if (this.formInline.valueOpenType == 1 && this.formInline.changeValue == '') {
          this.$message.error("请输入预警金额");
          return
        }
        if (this.formInline.ratioOpenType == 0) {
          this.formInline.changeRatio = 0
        }
        if (this.formInline.saleCardOpenType == 0) {
          this.formInline.saleCardValue = 0
        }
        if (this.formInline.valueOpenType == 0) {
          this.formInline.changeValue = 0
        }
        this.buttonLoading = true
        var data = {
          ...this.formInline
        }
        setGovConfig(data).then(res => {
          if (res.code == 200) {
            this.$message.success('操作成功');
             setTimeout(() => {
              this.getDetail(this.formInline.areaId)
              this.buttonLoading = false
            }, 800)
          }
        }).catch(() => {
          setTimeout(() => {
            this.buttonLoading = false
          }, 800)
        })
      },

    },
  };

</script>
<style lang="scss" scoped>
  @import "./style/warningSettings";

  .el-card-title {
    font-size: 20px;
  }
  .import_txt{
    color: red;
  }
  .block{
    display: flex;
  }
  .hui{
    color: #666;
  }
  .rig_20{
    color: #666;
    font-size: 16px;
    margin: 0 20px;
  }
  .slider_style{
    width: 300px;
  }
</style>
